package pages

import (
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ Progress() {
	@layouts.DocsLayout(
		"Progress",
		"Progress indicators inform users about the status of ongoing processes.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				Text: "Examples",
				ID:   "examples",
				Children: []modules.TableOfContentsItem{
					{
						Text: "Sizes",
						ID:   "sizes",
					},
					{
						Text: "Variants",
						ID:   "variants",
					},
				},
			},
			{
				Text: "Integration Patterns",
				ID:   "integration-patterns",
				Children: []modules.TableOfContentsItem{
					{
						Text: "File Uploads",
						ID:   "file-uploads",
					},
					{
						Text: "Multi-step Forms",
						ID:   "multi-step-forms",
					},
					{
						Text: "Background Processes",
						ID:   "background-processes",
					},
				},
			},
			{
				ID:   "api",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "progress",
						Text: "Progress",
					},
				},
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Progress",
			Description: templ.Raw("Progress indicators inform users about the status of ongoing processes."),
			Tailwind:    true,
			VanillaJS:   true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Progress",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				ShowcaseFile:    showcase.ProgressDefault(),
				PreviewCodeFile: "progress_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "progress",
					JSFiles:       []string{"progress"},
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Examples",
				ID:    "examples",
			}) {
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Sizes",
					ShowcaseFile:    showcase.ProgressSizes(),
					PreviewCodeFile: "progress_sizes.templ",
					ID:              "sizes",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Variants",
					ShowcaseFile:    showcase.ProgressVariants(),
					PreviewCodeFile: "progress_variants.templ",
					ID:              "variants",
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Integration Patterns",
				ID:    "integration-patterns",
			}) {
				<div class="prose max-w-none">
					<p>
						The Progress component can be integrated in different ways depending on your requirements:
					</p>
					<h3 class="text-lg font-medium mt-6 mb-2" id="file-uploads">File Uploads</h3>
					<p class="mb-2">
						For file uploads, use the browser's XMLHttpRequest or fetch API with progress events:
					</p>
					@modules.Code(modules.CodeProps{
						Language: "go",
					}) {
						{ exampleFileUploads }
					}
					<h3 class="text-lg font-medium mt-6 mb-2" id="multi-step-forms">Multi-step Forms</h3>
					<p class="mb-2">
						For multi-step forms, you can use either client-side calculations or HTMX for server-side validation between steps:
					</p>
					@modules.Code(modules.CodeProps{
						Language:       "templ",
						ShowCopyButton: true,
						CodeContent:    exampleMultiStepForms,
					})
					<h3 class="text-lg font-medium mt-6 mb-2" id="background-processes">Background Processes</h3>
					<p>
						For tracking background processes, choose between:
					</p>
					<ul class="list-disc list-inside space-y-2 ml-4">
						<li>
							<p class="mb-2">
								<strong>HTMX Polling</strong>: Simple approach, good for processes under a few minutes
							</p>
							@modules.Code(modules.CodeProps{
								Language:       "templ",
								ShowCopyButton: true,
								CodeContent:    exampleHTMXPolling,
							})
						</li>
						<li>
							<p class="mb-2">
								<strong>Server-Sent Events (SSE)</strong>: For real-time updates and longer processes
							</p>
							@modules.Code(modules.CodeProps{
								Language:       "go",
								ShowCopyButton: true,
								CodeContent:    exampleSSEHandler,
							})
						</li>
					</ul>
				</div>
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api",
			}) {
				@modules.APILegend()
				<div id="progress" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Progress",
						Description: "Visual progress indicator component for showing completion status of tasks or processes.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the progress element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the progress.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the progress element.",
								Required:    false,
							},
							{
								Name:        "Value",
								Type:        "int",
								Default:     "0",
								Description: "Current progress value (0-100).",
								Required:    false,
							},
							{
								Name:        "Max",
								Type:        "int",
								Default:     "0",
								Description: "Maximum value for the progress (defaults to 100 if 0 or negative).",
								Required:    false,
							},
							{
								Name:        "Size",
								Type:        "Size",
								Default:     "",
								Description: "Size of the progress bar. Options: 'sm', 'lg', or default (empty).",
								Required:    false,
							},
							{
								Name:        "Variant",
								Type:        "Variant",
								Default:     "",
								Description: "Color variant of the progress bar. Options: 'default', 'success', 'danger', 'warning' (defaults to 'default' if empty).",
								Required:    false,
							},
							{
								Name:        "BarClass",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the progress bar itself.",
								Required:    false,
							},
							{
								Name:        "Label",
								Type:        "string",
								Default:     "",
								Description: "Optional label text to display above the progress bar.",
								Required:    false,
							},
							{
								Name:        "ShowValue",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to display the progress value as text.",
								Required:    false,
							},
						},
					})
				</div>
			}
		}
	}
}

var exampleFileUploads = `// Client-side JavaScript
const form = document.querySelector("#upload-form");
form.addEventListener("submit", (e) => {
	e.preventDefault();
	const formData = new FormData(form);
	const xhr = new XMLHttpRequest();
	
	// Update progress bar with upload progress
	xhr.upload.addEventListener("progress", (event) => {
		if (event.lengthComputable) {
			const percent = Math.round((event.loaded / event.total) * 100);
			// Update progress bar width
			document.querySelector("#progress-bar").style.width = percent + "%";
			// Update percentage text
			document.querySelector("#progress-value").textContent = percent + "%";
		}
	});
	
	xhr.open("POST", "/upload");
	xhr.send(formData);
});`

var exampleMultiStepForms = `// Client-side approach
<div data-current-step="1" data-total-steps="4">
    @components.Progress(components.ProgressProps{
        Value: 25, // 1 of 4 steps = 25%
        Label: "Step 1 of 4",
        ShowValue: true,
    })
    
    // Form steps
</div>

// HTMX approach
<button 
    hx-get="/form/step/2" 
    hx-target="#form-container"
    class="px-4 py-2 bg-primary text-white rounded"
>
    Next
</button>`

var exampleHTMXPolling = `@components.Progress(components.ProgressProps{
	Value: initialValue,
	Label: "Processing...",
	ShowValue: true,
	Attributes: templ.Attributes{
		"hx-get":     "/api/job/123/progress",
		"hx-trigger": "every 2s",
		"hx-target":  "#progress-container",
	},
})`

var exampleSSEHandler = `// Server-side Go code
func SSEHandler(w http.ResponseWriter, r *http.Request) {
	// Set SSE headers
	w.Header().Set("Content-Type", "text/event-stream")
	w.Header().Set("Cache-Control", "no-cache")
	w.Header().Set("Connection", "keep-alive")
	
	// Send progress updates
	for i := 0; i <= 100; i += 10 {
		fmt.Fprintf(w, "data: {\"progress\": %d}\n\n", i)
		w.(http.Flusher).Flush()
		time.Sleep(1 * time.Second)
	}
}`
